<template>

  <div>
    <card-component :content-title="contentTitle">
      <div slot="action">
        <div class="action-wrapper">
          <el-form ref="form"  label-width="80px" inline>
            <el-form-item label="PCBA编号" >
              <el-input v-model="form.pcbaCode" placeholder="请输入PCBA编号" autofocus @change="handlePcbaCodeInput" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleSearch">查询</el-button>
              <el-button @click="handleNG" type="warning" :plain="!ngBtnSelect" style="margin-left: 40px" >NG</el-button>
              <el-button @click="handlePass" type='success' :plain="!passBtnSelect" >PASS</el-button>
            </el-form-item>
          </el-form>

          <el-form ref="form"  label-width="80px" inline>
            <el-form-item label="检测人员">
              <el-input v-model="form.inspector" placeholder="请输入检测人员名称" @change="handleInspectorInput"></el-input>
            </el-form-item>
          </el-form>
        </div>

        <div slot="table" v-if="id&&ngBtnSelect">



          <div class="checkInput-wrapper" >
            <div class="item-wrap" v-for="(item,index) in errorTypeList" :key="item.name" v-if="index<errorTypeList.length-1&&index%2===0">
              <div class="inner-item">
                <checkInput :info="errorTypeList[index]" :index="index"></checkInput>
              </div>
              <div class="inner-item">
                <checkInput :info="errorTypeList[index+1]" :index="index+1"></checkInput>
              </div>

<!--              <div class="inner-item flex-item" v-if="index===0" @click="handlePassClick">-->
<!--                <span style="margin-right: 10px;width: 20px;">11. </span><span>PASS</span>-->
<!--              </div>-->

              <div class="inner-item flex-item" v-if="index===0">
                <checkInput :info="index12" :index="11"></checkInput>
              </div>

            </div>

          </div>

          <div class="btn-wrapper">
            <el-button style="margin-right: 20px" @click="hanleClear">清空</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
          </div>
        </div>
      </div>
    </card-component>

    <el-dialog>

    </el-dialog>
  </div>



</template>

<script>

  import card from '@/base/card.vue'
  import checkInput from '@/base/checkInput.vue'
  import request from '@/common/js/request'
  export default {
    components: {
      'card-component': card,
      checkInput,
    },
    data() {
      return {
        contentTitle:'AOI检测追溯',
        form:{
          pcbaCode:'',
          inspector:localStorage.getItem('inspector')
        },
        id:'',
        ngStatus:false,
        checked4:false,
        ngBtnSelect:false,
        passBtnSelect:false,
        errorTypeList:[
          {
            name:'错料',
            value:'',
            isCheck:false,
          },
          {
            name:'漏料',
            value:'',
            isCheck:false,
          },
          {
            name:'虚焊',
            value:'',
            isCheck:false,
          },
          {
            name:'立碑',
            value:'',
            isCheck:false,
          },
          {
            name:'移位',
            value:'',
            isCheck:false,
          },
          {
            name:'反向',
            value:'',
            isCheck:false,
          },
          {
            name:'少锡',
            value:'',
            isCheck:false,
          },
          {
            name:'连锡',
            value:'',
            isCheck:false,
          },
          {
            name:'多锡',
            value:'',
            isCheck:false,
          },
          {
            name:'其他',
            value:'',
            isCheck:false,
          },
        ],

        index12:{
          name:'手补料',
          value:'',
          isCheck:false,
        },

        copyErrorTypeList :[]
      }
    },
    created: function () {
      this.copyErrorTypeList = this.copyArray(this.errorTypeList)
      console.log('this.$route.path',this.$route.path)
    },
    watch: {
      'form.pcbaCode' :(newValue,oldValue)=>{

      }
    },
    methods:{
      handlePcbaCodeInput(v){
        this.form.pcbaCode = v
        console.log('PCBA编号：',v)

        if(!this.id){
          this.handleSearch()
          return
        }
        const code = this.form.pcbaCode
        if(code.length<2){
          return
        }
        const last1 = this.form.pcbaCode.substr(this.form.pcbaCode.length-1,1)
        const last2 = this.form.pcbaCode.substr(this.form.pcbaCode.length-2,1)

        if(last1 === '1' && last2 === '1'){
          this.handlePassClick()
          return
        }

        this.handleSearch()


      },
      handleInspectorInput(v){
        localStorage.setItem('inspector',v)
      },
      copyArray(arr){
        return JSON.parse(JSON.stringify(arr))
      },
      handleSearch(){

        if(!this.form.pcbaCode){
          this.$message.error('请输入PCBA编号')
          return
        }

        this.id = ''
        this.ngStatus = false
        request.requestPcbaRecordList({
          pcbaCode:this.form.pcbaCode
        },res=>{
          if(res.data.code === 200){
            const data = res.data.data
            const list = data.pageInfo.list
            if(!list||list.length === 0){
              this.$message.error('未找到PCBA记录')
              return
            }
            this.id = list[0].id

            if(this.passBtnSelect){
              this.handlePassClick()
            }

          }
        })
      },
      handlePass(){
        // this.handlePassClick()
        this.ngBtnSelect = false
        this.passBtnSelect = true
        console.log('this.passBtnSelect',this.passBtnSelect)

      },
      handleNG(){
        this.ngStatus = true
        this.passBtnSelect = false
        this.ngBtnSelect = true

      },
      hanleClear(){
        this.errorTypeList = this.copyArray(this.copyErrorTypeList)
        this.index12 = {name:'手补料', value:'', isCheck:false,}
        this.id = ''
        this.ngStatus = false
        // this.ngBtnSelect = false
        // this.passBtnSelect = false
      },
      handlePassClick(){
        request.requestPcbaRecordAoi({
          id:this.id,
          aoiResult:"PASS",
          inspector:this.form.inspector,
          aoiTime: new Date().getTime()
        },res=>{
          if(res.code === 200){
            this.$message.success('提交成功')
            this.form.pcbaCode = ''
            this.id = ''
            this.ngStatus = false
            this.hanleClear()
          }

        })
      },
      getAoiResult(){

        const checkList = [...this.errorTypeList,this.index12].filter(x=>{
          return x.isCheck
        })
        if(checkList.length === 0){
          return ''
        }
        const result = checkList.reduce((prev,cur)=>{
          return prev + cur.value + cur.name +','
        },'')

        return result
      },
      handleSubmit(){
        const aoiResult = this.getAoiResult()
        if(!aoiResult){
          this.$message.error('请先选择或输入检测结果')
          return
        }
        request.requestPcbaRecordAoi({
          id:this.id,
          aoiResult,
          inspector:this.form.inspector,
          aoiTime: new Date().getTime()
        },res=>{
          if(res.code === 200){
            this.$message.success('提交成功')
            this.form.pcbaCode = ''
            this.id = ''
            this.hanleClear()
          }

        })
      }
    },

  }
</script>


<style scoped>
  .action-wrapper{
    margin-top: 20px;
    padding-left: 20px;
  }

  .checkInput-wrapper{
    display: flex;
    flex-direction: column;
    padding-left: 40px;
    padding-top: 20px;
  }
  .btn-wrapper{
    display: flex;
    padding: 30px 0;
    width: 600px;
    justify-content: center;
  }

  .item-wrap{
    padding: 5px 0;
    display: flex;

  }
  .item-wrap .inner-item{
    width: 320px;
  }
  .flex-item{
    display: flex;
    align-items: center;
    cursor: pointer;
  }
</style>


